今天將實作財務報表生成功能，並且使用圖表來視覺化財務數據。這將幫助使用者清晰地了解自己的財務狀況，包括收入、支出和儲蓄目標的完成情況。

報表生成

新增報表路由

在 routes 中新增一個報表生成的路由來提供報表資料。這些資料將來自於用戶的財務記錄，包括收入、支出等。

js
const express = require('express');
const router = express.Router();
const { getFinancialReport } = require('../controllers/reportController');

// 路由來生成報表
router.get('/report', getFinancialReport);

module.exports = router;

實作報表生成邏輯

在 controllers/reportController.js 中，撰寫生成報表的邏輯。這裡我們假設從資料庫中獲取財務記錄並進行計算，生成簡單的財務概況報表。

js
const Transaction = require('../models/Transaction');

const getFinancialReport = async (req, res) => {
  try {
    const transactions = await Transaction.find({ userId: req.user.id });
    const income = transactions.filter(t => t.type === 'income').reduce((acc, t) => acc + t.amount, 0);
    const expenses = transactions.filter(t => t.type === 'expense').reduce((acc, t) => acc + t.amount, 0);
    
    res.status(200).json({
      income,
      expenses,
      balance: income - expenses
    });
  } catch (error) {
    res.status(500).json({ message: 'Error generating report', error });
  }
};

module.exports = { getFinancialReport };

數據圖表顯示

選擇圖表庫

前端可以使用一些流行的圖表庫來顯示財務數據，常見的有：

• Chart.js： 簡單易用，支援各種圖表類型。
• D3.js： 更強大，但相對複雜。
  我們這裡使用 Chart.js 來顯示簡單的圓餅圖和折線圖。

設置前端圖表顯示

在前端頁面中顯示生成的財務報表數據，並使用圖表來進行視覺化。

html
<canvas id="myChart"></canvas>
<script>
  fetch('/api/report')
    .then(response => response.json())
    .then(data => {
      const ctx = document.getElementById('myChart').getContext('2d');
      new Chart(ctx, {
        type: 'pie',
        data: {
          labels: ['Income', 'Expenses'],
          datasets: [{
            label: 'Financial Overview',
            data: [data.income, data.expenses],
            backgroundColor: ['#36a2eb', '#ff6384'],
          }]
        }
      });
    });
</script>

透過圓餅圖和折線圖，可以輕鬆看出收入和支出的比例及月度變動情況。

總結

今天實作了報表生成和數據視覺化功能，幫助使用者能夠直觀的理解財務狀況。通過報表和圖表，用戶可以輕鬆追蹤收入與支出的分布，並對財務的細節有更深入的掌握。這是實現財務管理應用的重要一步，使應用更具有實用性。